<template>
  <div :class="is_show ? 'goods1' : 'goods2'">
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <ul>
        <li
          v-for="(item, index) in goodsList1"
          :key="index"
          @click="jumpTo(item.proid)"
        >
          <img :src="item.img1" alt="" />
          <div class="goods_main">
            <p>{{ item.proname }}</p>
            <span>￥{{ item.originprice }}</span>
          </div>
        </li>
      </ul>
      <ul>
        <li
          v-for="(item, index) in goodsList2"
          :key="index"
          @click="jumpTo(item.proid)"
        >
          <img :src="item.img1" alt="" />
          <div class="goods_main">
            <p>{{ item.proname }}</p>
            <span>￥{{ item.originprice }}</span>
          </div>
        </li>
      </ul>
    </van-list>
    <switchover :is_show="is_show" @switch="change"></switchover>
  </div>
</template>

<script>
import { getproList } from "../../apis/home";
import Vue from "vue";
import { Icon, List } from "vant";
import Switchover from "./Switchover.vue";

Vue.use(Icon);
Vue.use(List);
export default {
  props: ["count","goodsList"],
  components: {
    Switchover,
  },
  name: "List",

  data() {
    return {
      goodsList1: [],
      goodsList2: [],
      count1: 1,
      count2: 2,
      is_show: true,
      loading: false,
      finished: false,
    };
  },

  mounted() {},

  methods: {
    change() {
      this.is_show = !this.is_show;
    },
    onLoad() {
      // this.loading = true;
      getproList({ count: this.count1, limitNum: 8 }).then((data) => {
        setTimeout(() => {
          console.log(data.data.data);
          this.loading = false;
          if (data.data.data.length == 0) {
            this.finished = true;
          } else {
            this.goodsList1 = [...this.goodsList1, ...data.data.data];

            this.count1 += 2;
              
          }
        }, 1500);
      });
      getproList({ count: this.count2, limitNum: 8 }).then((data) => {
        setTimeout(() => {
          console.log(data.data.data);
          this.loading = false;
          if (data.data.data.length == 0) {
            this.finished = true;
          } else {
            this.goodsList2 = [...this.goodsList2, ...data.data.data];

            this.count2 += 2;
           
          }
        }, 1500);
      });
    },
    jumpTo(proid) {
      this.$router.push("/pro/detail/" + proid);
    },
  },

  created() {
    getproList({ count: this.count1, limitNum: 8 }).then((data) => {
      this.goodsList1 = data.data.data
      // console.log(this.count);
    });
    getproList({ count: this.count2, limitNum: 8 }).then((data) => {
      this.goodsList2 = data.data.data;
    });
  },
};
</script>

<style  scoped>
.goods_main {
  padding: 0.1rem;
}
.goods1 {
  margin-top: 0.2rem;
}
.van-list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.goods2 {
  margin-top: 0.2rem;
}
.goods1 ul {
  columns: 1 auto;
  width: 49%;
  /* flex-wrap: wrap;
  justify-content: space-around; */
}
.goods1 :nth-of-type(1) {
  margin-right: 0.045rem;
}
.goods1 ul li {
  margin-top: 0.1rem;
  /* width: 50%; */
  background-color: #fff;
  border-radius: 0.1rem;
}
.goods_main p:nth-child(1) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.goods_main span {
  color: rgb(255, 65, 66);
  font-size: 0.23rem;
}
.goods1 ul li img {
  /* height: 100%; */
  width: 100%;
  border-radius: 0.1rem 0.1rem 0 0;
}
.goods2 li {
  display: flex;
  margin-top: 0.1rem;
  background-color: #fff;
  position: relative;
  min-height: 1.1rem;
}
.goods2 ul li img {
  width: 30%;
  margin-right: 0.1rem;
  padding: 0.1rem;
}
.goods2 .goods_main {
  width: 68%;
}
.goods2 .goods_main p {
  display: inline-block;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.goods2 .goods_main span {
  display: block;
  position: absolute;
  bottom: 0.1rem;
}
</style>